<template>
  <div class="axios">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import axios from "axios";
/*
 get post
*/
export default {
  name: "AxiosMethod",
  // props: {
  //   msg: String
  // },
  components: {},
  data(){
    return{
      msg:"消息内容"
    }
  },
  created() {
    //   http://localhost:8080/data.json?id=12
    axios
      .get("/data.json", {
        params: {
          id: 12
        }
      })
      .then(res => {
        console.info(res);
        this.msg = res.data.title
      });

    axios({
      method: "get",
      url: "/data.json",
      params: {
        id: 11
      }
    }).then(res => {
      console.info(res);
    });

    // form-data表单提交（文件上传）
    // application/json提交数据。
    let data = {
      id: 13
    };
    axios.post("/post", data).then(res => {
      console.info(res);
    });

    axios({
      method: "post",
      url: "/post",
      params: data
    }).then(res=>{
      console.info(res)
    })

    // form-data请求
    let formData = new FormData()
    for(let key in data){
      formData.append(key,data[key])
    }

    axios.post('/post',formData).then(res=>{
      console.log(res)
    })

//  处理并发请求，同时1请求后端的多个接口
    axios.all(
      [
        axios.get('/data.json'),
        axios.get('/city.json')
      ]
    ).then(axios.spread((dataRes,cityRes)=>{
      console.info(dataRes,cityRes)
    }))


  }
};
</script>